<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { getCilentList } from '@/api/statisticalAnalysis/cilent.js'
//日期选择器
const dateValue = ref([''])
console.log(dateValue.value)
const onChange = (val) => {
  console.log(val)
}
//下拉tree选择
const data = [
  {
    value: '1',
    label: '传智教育',
    children: [
      {
        value: '1-1',
        label: '北京总公司',
        children: [
          {
            value: '1-1-1',
            label: '研发部门',
            children: [
              {
                value: '1-1-1-1',
                label: '研发一部'
              },
              {
                value: '1-1-1-2',
                label: '研发二部'
              },
              {
                value: '1-1-1-3',
                label: '测试部门'
              },
              {
                value: '1-1-1-4',
                label: '运维部门'
              }
            ]
          },
          {
            value: '1-1-2',
            label: '商务部',
            children: [
              {
                value: '1-1-2-1',
                label: '市场部'
              },
              {
                value: '1-1-2-2',
                label: '商机部'
              }
            ]
          },
          {
            value: '1-1-3',
            label: '财务部门'
          }
        ]
      }
    ]
  }
]
//分页
const total = ref(200)
const form = ref({
  pageNum: '1',
  pageSize: '10'
})
//列表渲染
const list = ref([])
const getCilentListApi = async () => {
  const data = await getCilentList(form.value)
  console.log(data)
}
const pageChange = (newPage) => {
  form.value.pageNum = newPage
}
const activeName = ref('first')
//echarts
const lineChart = ref(null)
const lineInstance = ref(null)
const douhnutChart = ref(null)
const douhnutInstance = ref(null)
//挂载调用
onMounted(() => {
  getCilentListApi()
  ////
  lineInstance.value = echarts.init(lineChart.value)
  lineInstance.value.setOption({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: [
      {
        type: 'value'
      },
      {
        type: 'value'
      }
    ],
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  })
  //
  douhnutInstance.value = echarts.init(douhnutChart.value)
  douhnutInstance.value.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Java' },
          { value: 735, name: '前端' },
          { value: 580, name: '人工智能' },
          { value: 484, name: 'Python' },
          { value: 300, name: '大数据' },
          { value: 300, name: '测试' },
          { value: 300, name: 'UI' },
          { value: 300, name: '新媒体' },
          { value: 300, name: '产品经理' }
        ]
      }
    ]
  })
})
</script>
<template>
  <div class="container">
    <div class="tabBox">
      <div>
        <el-date-picker
          v-model="dateValue"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="large"
          :default-value="[new Date(2023, 3, 1), new Date(2023, 6, 19)]"
          @change="onChange"
        />
      </div>
      <!-- 按钮组 -->
    </div>
    <div style="height: 500px;">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="height: 30px">
          <el-tab-pane label="新增客户数" name="first">
            <div ref="lineChart" style="width: 1000px; height: 500px"></div>
          </el-tab-pane>
          <el-tab-pane label="学科客户分布" name="second">
            <div class="imgBox">
              <div ref="douhnutChart" style="width: 1000px; height: 500px"></div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    <!-- // -->
    <h3 class="titleBox">客户统计报表</h3>
    <!-- /// -->
    <div class="searchBox">
      <el-form :inline="true" label-position="top">
        <el-form-item label="所属渠道">
          <el-select placeholder="请选择" size="large" style="width: 280px">
            <el-option label="线上活动"></el-option>
            <el-option label="推广介绍"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门">
          <el-tree-select
            placeholder="请选择归属部门"
            size="large"
            style="width: 280px"
            v-model="value"
            :data="data"
            check-strictly
            :render-after-expand="false"
          />
        </el-form-item>
        <el-form-item label="归属人">
          <el-input placeholder="请选择归属人" size="large" style="width: 280px"></el-input>
        </el-form-item>
      </el-form>
      <div style="margin-top: 30px">
        <el-button type="success" round size="large" style="width: 94px">搜索</el-button>
        <el-button type="info" round size="large" style="width: 94px">重置</el-button>
      </div>
    </div>
    <!-- //// -->
    <div class="tableBox">
      <el-table :data="list" style="width: 100%" stripe>
        <el-table-column label="客户ID" width="180" />
        <el-table-column label="姓名" width="180" />
        <el-table-column label="课程学科" />
        <el-table-column label="课程名称" />
        <el-table-column label="渠道来源" />
        <el-table-column label="归属人" />
        <el-table-column label="成交时间" sortable width="180" />
      </el-table>
      <el-row type="flex" justify="center">
        <el-pagination
          v-model:current-page="form.pageNum"
          v-model:page-size="form.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :small="small"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="pageChange"
          @size-change="pageSizeChange"
        />
      </el-row>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  background-color: #fff;
  .tabBox {
    display: flex;
    justify-content: space-between;
    padding: 14px 20px;
  }
  .titleBox {
    height: 83px;
    line-height: 83px;
    padding-left: 21px;
    background-color: #f9f9f9;
  }
  .searchBox {
    display: flex;
    justify-content: space-between;
    padding: 10px 56px 40px 45px;
  }
  :deep(.el-input__wrapper) {
    border-radius: 10px;
    background-color: #f9f9f9;
  }
  .active {
    color: #05cc95;
    background-color: #fff;
    border: 1px solid #f9f9f9;
  }
}
</style>
